<template>
	<div>
		<el-popover :visible="visible" placement="bottom" :width="440" v-if="!showList">
			<template #reference>
				<el-button type="warning" @click="visible = !visible"> 正在处理的数据({{ totalObj.all }}) </el-button>
			</template>
			<el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane :label="`数据采集中(${totalObj.gather})`" name="view_dpGatherForm_page">
					<template #label>
						<div>
							<el-badge :value="totalObj.gather" class="item">数据采集中</el-badge>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane :label="`异常申诉(${totalObj.appeal})`" name="view_dpExceptionAppeal_page">
					<template #label>
						<div>
							<el-badge :value="totalObj.appeal" class="item">异常申诉</el-badge>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane :label="`数据变更中(${totalObj.change})`" name="view_dpDataChange_page">
					<template #label>
						<div>
							<el-badge :value="totalObj.change" class="item">数据变更中</el-badge>
						</div>
					</template>
				</el-tab-pane>
				<ListPage :api="activeName" :key="activeName" :activeName="activeName" :dataType="dataType"></ListPage>
			</el-tabs>
		</el-popover>
    <el-tabs v-model="activeName" class="demo-tabs" v-else>
				<el-tab-pane :label="`数据采集中(${totalObj.gather})`" name="view_dpGatherForm_page">
					<template #label>
						<div>
							<el-badge :value="totalObj.gather" class="item">数据采集中</el-badge>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane :label="`异常申诉(${totalObj.appeal})`" name="view_dpExceptionAppeal_page">
					<template #label>
						<div>
							<el-badge :value="totalObj.appeal" class="item">异常申诉</el-badge>
						</div>
					</template></el-tab-pane>
				<el-tab-pane :label="`数据变更中(${totalObj.change})`" name="view_dpDataChange_page">
					<template #label>
						<div>
							<el-badge :value="totalObj.change" class="item">数据变更中</el-badge>
						</div>
					</template></el-tab-pane>
				<ListPage :api="activeName" :key="activeName" :activeName="activeName" :dataType="dataType"></ListPage>
			</el-tabs>
	</div>
</template>

<script setup lang="ts">
import ListPage from './list.vue'
import apiMod from '@/apiMod'
type Props = {
	dataType?: string | number
  showList?:boolean
}
const props = withDefaults(defineProps<Props>(), {
	dataType: 1,
  showList:false,
})

const visible = ref(false)
const totalObj = ref({
	all: 0,
	gather: 0,
	change: 0,
	appeal: 0,
})
const activeName = ref('view_dpGatherForm_page')
const getTotal = () => {
	apiMod
		.view_dpGatherForm_allCount({
			dataType: props.dataType,
		})
		.then((res) => {
			totalObj.value = res.data
		})
}

onMounted(() => {
	getTotal()
})
</script>

<style scoped lang="scss">
	.demo-tabs{
		:deep(.el-tabs__header){
			box-shadow: none;
			border-top: none;
		}
		:deep(.el-tabs__nav-wrap){
			margin: 10px 0;
		}
	}
</style>
